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Who We Are 


e Founded in 2004 by former Lucasarts Employees 


¢ Video Game Developer and self Publisher, releasing on multiple platforms: 
Xbox 360/One, PS3/4, PC, Android, and iOS 


¢ Primarily Develop Licensed, Episodic, Story driven Adventure Games 


¢ For Example... 
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What | do 


¢ Make Tools for Making Telltale Games 
— Proprietary (no pictures, sorry!) 
— Windows only (for now) 
— Desktop only 
— Multiple Window Interface 


¢ Multiple QML and QWidget Windows open simultaneously 


¢ Several generalized tools (i.e. game data Inspector) 
¢ QML / Quick 
- Graphical display and interaction 
e Standard Desktop interface 


-— Menus, Toolbars, Shortcuts, etc. 


¢ Tooling running alongside Game Engine 
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Application Structure Overview 
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Game Development Tools Environment 


¢ Game Engine Operation + Tool Overhead 


¢ General strict performance requirements 


— 30 FPS+ with tools running 


—- Can result in strange trades 


¢ Model updates at 10FPS for user interaction 


¢ Certain QML Integration methods unfeasible 


Game Update / Render Qt Tool / Model Updates 


30+ Times Per Second (Not to Scale) 
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General Application Setup 


Polls 
Updates 
Game Data 
7 Model 
a, Modiies saa Mouse Interaction 
uci estate Force Updates or Undo WAS aisstarcter- 


Modifies 


(Selection, Undo) 


Slot Bank 


(C++) 


User Interaction 


Qo telltalegames 


C++ Structure 


¢ Game Data 


— Mostly non Qt / QObject based (internal game engine data) 


-— Continuously updating, often without callbacks or 
notification 


- Data “one way” 
e Affected by game state 
¢ Game Data changes 


¢ Model detects and updates 
e QML Responds 
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Qt Structure 


¢ Polling Model 


— Polls game data multiple times a second 
— Sets model roles for game data changes 


— Manages settings as properties 
e Slot Bank 


— Handles most game engine interaction 
— Changes game data directly 
— Model responds on next update loop 


— Can also force immediate update for responsiveness / safety 


¢ Undo/Redo, Delete 
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QML Setup 


e Nature of QML Data 


— View based 


¢ QML does visualization of C++ data through model 
¢ Most interaction through Menu / Toolbar 


e Basically no data entry 


— Mouse interaction primarily 


— Signal out or invoke to C++ 
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QML Setup — cont. 


¢ Data provided through custom Model roles 
— Creates QQMLContext for each QML Component 
— Sets model roles as Context Properties 
— Creates QML Component into this context 
— Updates Context Properties as part of polling 


¢ Mouse interaction 


— Sets top level properties for C++ (mouse point, etc.) 


— Components / ApplicationWindow signal out for interaction 
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Desktop User Interface 
Elements 
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User Interface Elements 
¢ QtQuick Controls 


—- QML Items for desktop interface elements 


-— Most QWidget interaction elements have corresponding 
Controls 


© QAction / Action, QMenu / Menu, QToolBar / ToolBar, etc. 
¢ QComboBox, QLineEdit, more limited 


¢ All behave slightly different, or have missing elements 
¢ QtQuick Dialogs 
— File, Color, Message 


— No QInputDialog equivalent? 
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QAction and QtQuick Action 


e Action has most QAction properties 
— Text, Checked/Checkable, Enabled, Shortcut, Icon, Tooltip 
— Can be added to QML Items for shortcuts 

¢ Notable missing items 


— Visible: Can't hide everything that references an action by 
controlling visible 


— Shortcut context? 
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Extending Action 


e Add in Visible property 


// MyAction.qml 
Action 
{ 
property bool visible: true 


} 


// MyMenultem.gml 
Menultem 


{ 
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} 
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QMenu and QtQuick Menu 


¢ Like QAction/Action, mostly similar 
— Add Menultems, Actions, etc. 
— Supports enabled, icon, visible, etc. 

¢ Some missing elements 
- aboutToHide, aboutToShow signals 


— Hinders dynamic menu updates when visibility changes 
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Extending Menu 
e Adding menuAboutToShow Signal 


// MyMenu.gml 
Menu 


{ 


Signal menuAboutToShow 


property bool showingPopup: false; 


onPopupVisibleChanged: 

{ 
showingPopup = !showingPopup; 
Lf (showingPopup) 
{ 


menuAboutToShow () 
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Extending Menu — cont. 
¢ Works for signaling open 
¢ Allows for dynamic updating 


e ...However, onPopupVisibleChanged is private? 


- on__popupVisibleChanged in some versions 
— popupVisible property private 
— Maybe shouldn't be used? 
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Extending Menu — cont. 


¢ With menuAboutToShow signal, we can 
dynamically update Menus 


— Can be done through QMetaObject::invokeMethod(menu, 
“additem”, Q_ARG(QString, text)) 


— Or, create Javascript function in menu 
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Dynamically Adding Items to Menu 


// In MyMenu.gml 
function addToMenu(stringNames, action) { 
menu.clear () 
var item; 
if(stringNames.length > Q) 
{ 
menu.visible = true; 
for(var 1 = 0; 1 < stringNames.length; itt) { 
item = menu.addItem(stringNames[i]); 
item.action = action; 


} 


} else menu.visible = false 


// In C++ 
QMetaObject::invokeMethod(menuPointer, "addToMenu", Qt::DirectConnection, 


Q ARG(QVariant, QVariant::fromValue (itemsToAdd)), Q ARG(QVariant, 
OVariant (actionPointer))); 


// Tf you need to refer or iterate over elements 
QQOmlListReference menulItems(menuPointer, "items"); 
for(int 1 = 0; 1 < menulItems.count(); +141) 


{ 


OObject* item = menultems.at (1); 


} 
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ToolBars vs QToolBar / Quirks 


¢ Controls ToolBar shares almost nothing with QToolBar 
— Uses “ToolButton” which can be assigned an Action 
- ToolButton does not seem to update with Action.tooltip change 


— Basically just a layout 


No floating 
— No hide / show menu by default 


No separators 


ApplicationWindow expects single ToolBar 
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Controls Menu - Quirks 


¢ Slow to open 


— Few tenths of a second tne 
on some computers 


e Flash or blink on 
Show 


¢ Clicking a Submenu 
closes all open menus 
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Quick Menus - Quirks 


¢ Height not correct on 
first show when ~20 
Menu Items are used 


-— Can be too large, 
extending drop shadow 


— Can be too small, 
truncating menu options 


Option 1 
Option 2 
Option 3 
Option 4 
Option 5 
Option 7 
Option 8 
Option 10 
Option 11 
Option 13 
Option 14 
Option 15 
Option 16 
Option 18 
Option 19 
Option 21 
Option 22 
Option 23 
Option 24 


Option 25 
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Controls Menus - Quirks 


e Width not correct for Menultems with long text 
— Truncates text 


— Overlaps shortcut listing 


¢ Can be compensated for by adding padding whitespace 


Long Items w/Shortcuts | Random on/off 


Normal Sized Item Ctrl+D 
is is a really long menu item with a shortcut Ctrl+L 
is is another long menu item with a shor€Gmt+Shift+L 
is another item with a long shortcut @t+Alt+Shift+L 
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Controls Menu - Quirks 


e Menus truncate on 
multiple monitors 


Optio 
— Makes some menu options ee 
. : Optio 3 
impossible to choose based on Option ‘ 
position Option 5 


— Affects all menus, but especially ae 


Option / 
bad for context menus 


Option & 
— Only seems to happen with eee 
monitors of different resolution, 


including rotated monitors 


Option 10 


Option 11 
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Application / QWidget Integration 


Integrating with QWidget Windows 
— QWindow / QQuickWindow / QQuickView 
— QQuickWidget 

— QWidget::createWindowContainer 


Minimizing Controls Usage 


Managing Focus Issues 
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QWindow / QQuickWindow / 
QQuickView 


e Simplest 


Direct QML with no widget mixing 


Best Performing 


Basically no knowledge of QWidgets 
— No parent / child setup 


— Launching any Widget window will cause “pop under” 
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QQuickWidget 


¢ Actual QWidget with QML inside of it 


e Allows for QWidget parent / child and modal windows 
¢ Allows for QWidget mixing with QML 
¢ Behaves properly with QWidget hierarchy 


— Widget stacks, transparency, etc. 


— Sacrifices some performance for correctness 
¢ Performance Considerations 


— “Minor” performance hit 


— Disables threaded rendering 
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QWidget 
‘:createWindowContainer 


e Like QQuickWidget, allows embedding QML and Widget mixing 


¢ Sacrifices Widget stacking accuracy for performance 


— Works great for entirely QML application where stacking doesn't matter 


— Much better performance relative to QquickWidget for multiple windows 
¢ For our case: Frame rendering + Model Polling + Widget Overhead 
e Results in near QWindow performance 
e Several FPS over QquickWidget, 
¢ Oddity of our setup? 


e Set QWindow container widget as Focus Proxy for top level QWidget 


¢ Our preferred method for using QML 
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CreateWidgetContainer Example 


// Within QWidget derived class 


QQOmlComponent windowLoader(qmlEngine, this); 
WindowLoader->loadUrl (QUrl“gre://MyQmlWindow.gqml”) ; 


QQuickWindow* quickWindow = qobject cast<QQuickWindow*> (windowLoader->create()); 


QSize size = quickWindow->size(); 


QWidget* container = QWidget::createWindowContainer (quickWindow, this); 


setCentralWidget (m widget) ; 

setFocusProxy(m widget); // focus container widget when top level widget is focused 
resize(size); 

setFocusPolicy(Qt::NoFocus); // work around QML activation issue 
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Minimizing Controls Usage 


es 


e On Windows, controls are Problematic 
¢ Many Small problems 


— Behavior is quite different from platform standard and 
QWidgets 


— Many minor annoyances 


¢ Some Large Problems 


— Menu Truncation on multiple monitors 
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Minimizing Controls Usage — 


cont. 

eWith QQuickWidget or createWindowContainer 
standard QWidgets can be mixed in 
¢e Works especially well for QMenu, QAction, QToolBar, etc. 
e Avoids current problems with Controls 


¢ Better focus handling 


e Causes some other unique challenges 
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Handling Focus Issues 


e For createWindowContainer, focus on container 
QWidget can be problematic 


¢ In particular, the “activation loop of death” 


— Triggered by launching multiple container widgets in same 
loop as part of multiple file open 


— Underlying QWindows both “activate” and pump message 
queue 


- Activation toggles between windows in infinite loop 
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Handling Focus Issues cont. 


e Avoiding activation infinite loop 
— Set container QWidget's focus policy to NoFocus 
— Set focus onto it later manually or when needed 


—- QML Focus will still operate its own way 
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Handling Focus Issues- cont. 


¢QMienu Focus Problems 
e j.e., QMenu::popup for context menus over QML area 


¢ Can be fixed by setting focus back on QMenu::aboutToHide: 


// In .cpp, along with QMenu creation 
OOb7ECc Ut? + Connect ( 


m myMenu, &QMenu::aboutToHide, 
=i) + M2container=Ssecrocus() 7 + 


); 
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Conclusion 


¢ Choose between either QQuickWidget or 
createWindowContainer 


¢ Embed QML and use it for what its needed for 
¢ Use QWidgets for desktop interface components 
¢ For Windows Desktop at least 


° One last thing... 


‘Qo telltalegames 


We're Hiring! 


¢ Tools Engineer - Qt (Core Technology) 
— 3+ Years of C++ Experience 
— 1+ Year of Qt Experience 
— Primarily QWidget development focused 
¢ Come pick up a job flyer 
¢ Job website: http://www.telltalegames.com/company/jobs/ 


e Meet our Recruiters at the bar after the conference on the 
5th 
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Questions? 


